<template>
  <div>
    <el-form inline>
      <el-form-item>
        <el-button
          @click="dialogVisible = true"
          type="primary"
          icon="el-icon-edit"
          >添加司机</el-button
        >
      </el-form-item>
      <el-form-item label="城市">
        <pickArea :showArea="false" @getSite="getCity"></pickArea>
      </el-form-item>
      <el-form-item label="请输入">
        <el-input
          :debounce="500"
          v-model="query.driverName"
          placeholder="请输入司机名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="initlist" type="primary">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="drivers" stripe style="width: 100%">
      <el-table-column prop="driverName" label="司机姓名" width="120">
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="120">
      </el-table-column>
      <el-table-column prop="licenseCard" label="身份证号" width="180">
      </el-table-column>
      <el-table-column prop="birthday" label="生日" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="160"> </el-table-column>
      <el-table-column prop="licenseGrade" label="驾驶证" width="120">
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" width="180">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="280">
        <template #default="scope">
          <el-button type="primary" size="small" @click="driverlist(scope.row)"
            >详情</el-button
          >
          <el-button type="info" size="small" @click="nowdriverlist(scope.row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="cancellist(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total"
    >
    </el-pagination>

    <!-- 添加司机  -->
    <el-dialog
      title="添加司机"
      :visible.sync="dialogVisible"
      width="36%"
      center
    >
      <el-form ref="form" :model="query" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="query.driverName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <template>
            <el-radio v-model="query.gender" label="男">男</el-radio>
            <el-radio v-model="query.gender" label="女">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="query.idCard"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="query.phone"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
            v-model="query.birthday"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="驾驶证">
          <el-select
            v-model="query.licenseGrade"
            placeholder="请选择驾驶证类型"
          >
            <el-option value="A1型">A1型</el-option>
            <el-option value="A2型">A2型</el-option>
            <el-option value="A3型">A3型</el-option>
            <el-option value="A4型">A4型</el-option>
            <el-option value="C1型">C1型</el-option>
            <el-option value="C2型">C2型</el-option>
            <el-option value="C3型">C3型</el-option>
            <el-option value="C4型">C4型</el-option>
            <el-option value="D型">D型</el-option>
            <el-option value="E型">E型</el-option>
            <el-option value="F型">F型</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="居住地址">
          <pickArea @getSite="getCity"></pickArea>
          <el-input v-model="query.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addDriver">立即创建</el-button>
      </span>
    </el-dialog>

    <el-dialog title="司机信息详情" :visible.sync="dialog" width="42%" center>
      <el-descriptions :column="3" border>
        <el-descriptions-item width="30%">
          <template slot="label"> id </template>
          {{ nowlist.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 姓名 </template>
          {{ nowlist.driverName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 性别 </template>
          {{ nowlist.gender }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 身份证号 </template>
          {{ nowlist.idCard }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 生日 </template>
          {{ nowlist.birthday }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 电话 </template>
          {{ nowlist.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 驾驶证 </template>
          {{ nowlist.licenseGrade }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 居住地 </template>
          {{ nowlist.province + nowlist.city + nowlist.area + nowlist.address }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog title="司机信息详情" :visible.sync="dia" width="50%" center>
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 姓名 </template>
          <el-input v-model="query.driverName" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 性别 </template>
          <el-radio v-model="query.gender" label="男">男</el-radio>
          <el-radio v-model="query.gender" label="女">女</el-radio>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 身份证号 </template>
          <el-input v-model="query.idCard" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 生日 </template>
          <el-date-picker
            v-model="query.birthday"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 电话 </template>
          <el-input v-model="query.phone" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 驾驶证 </template>
          <el-input v-model="query.licenseGrade" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 居住地 </template>
          <pickArea
            @getSite="getCity"
            :province="query.province"
            :city="query.city"
            :area="query.area"
          ></pickArea>
          <el-input v-model="query.address"></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitOrder">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pickArea from "../../components/pickArea.vue";
export default {
  components: {
    pickArea,
  },
  mounted: async function () {
    this.initlist();
  },
  data() {
    return {
      nowlist: [],
      drivers: [],
      query: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        driverName: "",
        province: "",
        city: "",
        area: "",
        birthday: "",
        address: "",
        licenseGrade: "",
        gender: "",
        idCard: "",
        phone: "",
      },
      dialogVisible: false,
      dialog: false,
      dia: false,
    };
  },
  methods: {
    initlist: async function () {
      let res = await this.$http.get("/driverUser/getAllDriver", {
        params: {
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
          province: this.query.province,
          city: this.query.city,
          driverName: this.query.driverName,
        },
      });
      this.drivers = res.data.object.list;
      this.query.total = res.data.object.total;
    },
    handleSizeChange: function (pageSize) {
      this.query.pageSize = pageSize;
      this.initlist();
    },
    handleCurrentChange: function (pageNum) {
      this.query.pageNum = pageNum;
      this.initlist();
    },
    addDriver: async function () {
      let res = await this.$http
        .post("/driverUser/addDriver", {
          driverName: this.query.driverName,
          province: this.query.province,
          city: this.query.city,
          area: this.query.area,
          birthday: this.query.birthday,
          address: this.query.address,
          licenseGrade: this.query.licenseGrade,
          gender: this.query.gender,
          idCard: this.query.idCard,
          phone: this.query.phone,
        })
        .then((res) => {
          if (res.data.code) {
            this.$message.success("添加成功");
            this.reload();
          }
        });
      this.dialogVisible = true;
    },
    initDriver: function () {},
    getCity: function (province, city) {
      this.query.province = province;
      this.query.city = city;
      this.initlist();
    },
    getCity: function (province, city, area) {
      this.query.province = province;
      this.query.city = city;
      this.query.area = area;
    },
    driverlist: function (nowlist) {
      this.dialog = true;
      this.nowlist = nowlist;
    },
    nowdriverlist: function (nowlist) {
      this.dia = true;
      this.query = nowlist;
    },
    submitOrder: async function () {
      let order = JSON.parse(JSON.stringify(this.query));
      let res = await this.$http
        .post("/driverUser/updateDriver", order)
        .then((res) => {
          if (res.data.code) {
            this.$message.success("修改成功");
            this.reload();
          }
        });
    },
    cancellist: async function (driverid) {
      // console.log(driverid);
      let res = await this.$http
        .delete("/driverUser/deleteDriver?driverId=" + driverid)
        .then((res) => {
          if (res.data.code) {
            this.$message.success("删除成功");
            this.reload();
          }
        });
    },
  },
  inject: ["reload"],
};
</script>

<style></style>
